<template>
  <div id="app">
    <navbar v-model="currentTab"></navbar>
    <div class="main">
      <top-header :tabName="currentTab"></top-header>
      <div class="main-body">
        <router-view @changeTab="changeTab"></router-view>
      </div>
    </div>

  </div>
</template>
<script>
  import Navbar from './components/nav'
  import TopHeader from './components/header'

  export default {
    name: 'App',
    data() {
      return {
        currentTab: "All",
        isLoading: false,
        isLoaded: false,
        isAfterLoaded: false
      }
    },
    computed: {
      loadbarClass() {
        return {
          loadbar: true,
        }
      }
    },
    methods: {
      changeTab(tab) {
        this.currentTab = tab;
      }
    },
    components: {
      Navbar, TopHeader
    }
  }
</script>

<style>
  html, body, ul, p {
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
    font-family: Arial, sans-serif;
    color: #333;
  }

  ul {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  .block {
    display: block;
  }

  #app {
    height: 100%;
  }

  .main {
    margin-left: 260px;
    height: 100%;
    transition: all .3s;
  }

  .main-body {
    height: calc(100% - 61px);
  }

  @media screen and (max-width: 768px) {
    .nav-container {
      transform: translateX(0);
    }

    .main {
      margin-left: 0;
    }
  }
</style>
